<script setup>
import { watch,onMounted,ref } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
function gettime(){
  let now = new Date()
  return (now.getFullYear()+"-"+(now.getMonth()+1).toString().padStart(2,'0')+"-"+now.getDate().toString().padStart(2,'0'))
}
function l2datas(res) {
    if (route.params.date=="true"){
      console.log(1)
      let result = res.filter(item=>item.date == gettime())
      if (route.params.state=="all"){
      return result
    }else if(route.params.state=='true'){
      return result.filter(item=>item.state == 'true')
    }else if(route.params.state=='false'){
      return result.filter(item=>item.state == 'false')
    }
    }else {
    if (route.params.state=="all"){
      return res
    }else if(route.params.state=='true'){
      return res.filter(item=>item.state == 'true')
    }else if(route.params.state=='false'){
      return res.filter(item=>item.state == 'false')
    }
    }
}
    fetch(`http://127.0.0.1:5000/secondli?pid=${route.params.id}`).then(res => res.json()
      ).then(res => {
          datas.value = l2datas(res)
    })
const props = defineProps(["datas"])

const vFocus = {
  mounted: (el) => el.focus()
}
let datas=ref([])
function aaa(obj){
  obj.isshow = true
}
function showfn(obj){
  return obj.isshow==true
}
function bbb(obj){
  obj.isshow = false
  fetch(`http://127.0.0.1:5000/updatesecondli?id=${obj.id}&con=${obj.con}&state=${obj.state}&date=${obj.date}`).catch(error => console.error('Error:', error))
}
function change(obj) {
  obj.state = 'true'
  datas.value = l2datas(datas.value)
  fetch(`http://127.0.0.1:5000/updatesecondli?id=${obj.id}&con=${obj.con}&state=${obj.state}&date=${obj.date}`).catch(error => console.error('Error:', error))
}
function change1(obj) {
  obj.state = 'false'
  fetch(`http://127.0.0.1:5000/updatesecondli?id=${obj.id}&con=${obj.con}&state=${obj.state}&date=${obj.date}`).catch(error => console.error('Error:', error))
  datas.value = l2datas(datas.value)
}
function change2(item) {
  fetch(`http://127.0.0.1:5000/updatesecondli?id=${item.id}&con=${item.con}&state=${item.state}&date=${item.date}`)
  datas.value = l2datas(datas.value)
}
function addl2(){
  let con = "新建待办内容"+(datas.value.length+1)+"（双击编辑）"
  fetch(`http://127.0.0.1:5000/addsecondli?con=${con}&state=false&date=${gettime()}&pid=${route.params.id}`)
  datas.value.push(
        {
          con:con,
          state: 'false',
          date: gettime()
        }
    )
}
</script>

<template>

  <el-button class="add2" type="primary" icon="Plus" @click="addl2">添加新的待办内容</el-button>
  <ul>
    <li v-for="(item) in datas" @dblclick="aaa(item)" >
      <el-icon v-if="item.state == 'false'" @click="change(item)"><CircleCloseFilled/></el-icon>
      <el-icon @click="change1(item)" v-else><SuccessFilled/></el-icon>
      <input v-model="item.con" v-if="showfn(item)" @blur="bbb(item)" v-focus>
      <span v-else>{{item.con}}</span>
      <span >{{item.date}}</span>
      <el-date-picker
        v-model="item.date"
        type="datetime"
        placeholder="Pick a Date"
        format="YYYY-MM-DD"
        value-format="YYYY-MM-DD"
        @change="change2(item)"
      />
    </li>
  </ul>

</template>

<style scoped>
ul li{
  margin: 0;padding: 0;
  list-style: none;
}
</style>